<template>
  <div class="role" style="background:white;  border-radius: 5px;
">
    <div class="search d-between">
      <div class="d-start">
        <div class="d-center" style="margin-right:10px;">
          <el-button
            size="medium"
            type="info"
            @click="search()"
            icon="el-icon-refresh"
            style="width:36px;height:36px;padding:0;"
          ></el-button>
          <el-button size="medium" type="primary" @click="add()">新增</el-button>
        </div>
        <div class="d-center" style="margin-right:10px;">
          <el-button size="medium" :type="selectData.length>0?'danger':'info'" @click="del()">删除</el-button>
        </div>
      </div>
      <div class="d-end">
        <div class="input d-center">
          <el-input size="medium" v-model="searchs.name" placeholder="请输入名称">
            <template slot="prepend">角色组名称：</template>
          </el-input>
        </div>

        <div class="d-center" style="margin-left:10px;">
          <el-button
            size="medium"
            plain
            type="info"
            @click="searchs.page = 1;search()"
          >搜索</el-button>
          <el-button size="medium" type="info" @click="cancel()" plain>重置</el-button>
            <!-- icon="el-icon-search"
            style="width:36px;height:36px;padding:0;" -->
        </div>
      </div>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%;"
        height="100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="角色组名称" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="edit(scope.row)">{{scope.row.name}}</el-link>
          </template>
        </el-table-column>-->
        <el-table-column prop="name" label="角色组名称" align="center"></el-table-column>

        <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="update_time" label="最后更新时间" align="center"></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100"
          :filters="[{ text: '开启', value: '2' }, { text: '关闭', value: '1' }]"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status == '2' ? 'primary' : 'danger'"
              disable-transitions
            >{{scope.row.status==1?'关闭':'开启'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" plain @click="edit(scope.row)">编辑</el-button>
            <el-button size="medium" type="warning" plain @click="editPlan(scope.row)">设置权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogFormVisible"
      @close="close"
      width="80%"
      top="10"
    >
      <el-form :model="form">
        <el-form-item prop="name" label="角色组名称" :label-width="'100px'">
          <el-input size="medium" v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="角色组状态" :label-width="'100px'">
          <el-radio v-model="form.status" :label="2">开启</el-radio>
          <el-radio v-model="form.status" :label="1">关闭</el-radio>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">取 消</el-button>
        <el-button
          size="medium"
          type="primary"
          :disabled="buttonShow?true:false"
          @click="actions()"
        >保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑权限" :visible.sync="dialogFormVisible1" @close="close1" width="80%" top="10">
      <el-tree :data="data"  show-checkbox node-key="id" :props="defaultProps" ref="permissionTree"></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible1=false">取 消</el-button>
        <el-button
          size="medium"
          type="primary"
          :disabled="buttonShow?true:false"
          @click="menuaction()"
        >保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "role",
  data() {
    return {
      name: "",
      active: "",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      popShow: "",
      selectData: [],
      tableData: [],
      form: {},
      menuform: {},
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      searchs: {
        name: ""
      },
      loading: true,
      buttonShow: false,
      dialogtitle: "角色详情"
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.setDefaultChecked(); // 如果为true。那么调用设置树形默认值的方法
      }
    }
  },
  mounted: function() {
    this.getdata();
  },
  methods: {
    setForm() {
      this.form = {
        name: "",
        status: 2
      };
    },
    setMenuForm() {
      this.menuform = {
        rules: "",
        group_id: 0
      };
    },
    getdata() {
      let that = this;
      // let params = this.searchs;
      that.loading = true;
      this.$get("/api/users/group", this.searchs).then(res => {
        if (res.code == 200) {
          that.tableData = res.data.list;
          that.data = res.data.menu;
        }
        setTimeout(function() {
          that.loading = false;
        }, 300);
      });
    },
    edit(item) {
      this.form = item;
      this.dialogFormVisible = true;
      this.dialogtitle = item.name;
    },
    editPlan(item) {
      this.dialogFormVisible1 = true;
      this.menuform.group_id = item.id;
      this.$nextTick(() => {
        this.$refs.permissionTree.setCheckedKeys([]);
        if (item.rules) {
          this.$refs.permissionTree.setCheckedKeys(item.rules.split(","));
        }
      });
    },
    close() {
      //   this.dialogFormVisible = false;
    },
    close1() {
      //   this.dialogFormVisible = false;
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    add() {
      this.dialogtitle = "新增角色";
      this.setForm();
      this.dialogFormVisible = true;
    },
    del() {
      let num = this.selectData.length;
      if (num <= 0) {
        this.$message.error("没有选中要删除的条目");
        return false;
      }
      this.$confirm("此操作将永久删除该角色组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.selectData.forEach((item, index) => {
            this.$post("/api/users/group_deletes", {
              id: item.id
            }).then(res => {
              if (index + 1 == num) {
                this.getdata();
                this.$message({
                  title: "操作提示",
                  message: res.msg,
                  type: res.state
                });
              }
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    search() {
      this.getdata();
    },
    cancel() {
      this.searchs = {
        name: "",
      };
      this.getdata();
    },
    actions() {
      // var param = {
      //   xm:"xm",
      //   lxdh:"lxdh",
      //   dwmc:"1",
      //   jtzz:'2',
      //   xjzz:'3',
      //   sfzh:'123123123',
      //   unitinfo:'{{1,2,3},{1,2,3}}',
      //   sproject:[{
      //     xmmc:'xmmc',
      //     xmksrq:'10',
      //     xmjsrq:'21',
      //     xmrz:'123'
      //   }]
      // };
      // this.$post("/api/Staff/actions", param).then(res => {
      //   console.log(res);
      // })
      // return;
      let that = this;
      let button = "添加角色组操作";
      this.buttonShow = true;
      if (this.form.id) {
        button = "编辑角色组操作";
      }
      this.$post("/api/users/group_actions", this.form).then(res => {
        this.$message({
          title: button,
          message: res.msg,
          type: res.state
        });
        if (res.code == 200) {
          this.getdata();
          that.dialogFormVisible = false;
        }
        setTimeout(function() {
          that.buttonShow = false;
        }, 300);
      });
    },
    menuaction() {
      if (!this.menuform.group_id) return false;
      this.dialogFormVisible1 = false;
      this.menuform.rules = this.$refs.permissionTree.getCheckedKeys();
      let that = this;
      this.$post("/api/users/auth", this.menuform).then(res => {
        this.$message({
          title: "设置权限",
          message: res.msg,
          type: res.state
        });
        if (res.code == 200) {
          this.getdata();
          that.dialogFormVisible1 = false;
        }
        setTimeout(function() {
          that.buttonShow = false;
        }, 300);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.role {
  width: 100%;
  height: calc(100% - 40px);
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 5px;
    position: relative;
    .input {
      width: 300px;
      margin-left: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .main {
    //   width: 100%;
    height: calc(100% - 60px);
    // overflow-y: scroll;
    // position: absolute
    border: 1px solid #ebeef5;
  }
}
</style>